import { defineStore } from "pinia";
let refreshIndex = 0;
export const useMenuTagsStore = defineStore("menuTags", {
  state: () => ({
    tags: [
      {
        path: "/home",
        name: "home",
        meta: { title: "主页", type: "main" },
      },
    ],
    tagsStack: [
      {
        path: "/home",
        name: "home",
        meta: { title: "主页" },
      },
    ],
    tagShow: true, // 用于处理路由刷新控制
  }),
  getters: {
    allTagName: (state) => {
      return state.tags.map((item) => item.name);
    },
    currentTag: (state) => {
      return state.tagsStack[state.tagsStack.length - 1];
    },
  },
  actions: {
    addTag(route) {
      const index = this.tags.findIndex((item) => item.name === route.name);
      if (index < 0) {
        this.tags.push(route);
      }
      this.setTagsStack(route);
    },

    removeTag(route) {
      const index = this.tags.findIndex((item) => item.name === route.name);
      if (index >= 0) {
        this.tags.splice(index, 1);
        this.removeTagsStack(route);
      }
    },

    // 设置打开标签的堆栈
    setTagsStack(route) {
      const index = this.tagsStack.findIndex(
        (item) => item.name === route.name
      );
      if (index < 0) {
        this.tagsStack.push(route);
      } else {
        this.tagsStack.splice(index, 1);
        this.tagsStack.push(route);
      }
    },

    // 移除打开标签堆栈
    removeTagsStack(route) {
      const index = this.tagsStack.findIndex(
        (item) => item.name === route.name
      );
      if (index >= 0) {
        this.tagsStack.splice(index, 1);
      }
    },

    // 刷新路由 tagShow=false 通过v-if使路由组件隐藏，再次设为true时候重新渲染，达到刷新目的
    refreshBefore(route) {
      this.tagShow = false;
      const index = this.tags.findIndex((item) => item.name === route.name);
      if (index >= 0) {
        refreshIndex = index;
        this.tags.splice(index, 1);
      }
    },
    // 刷新路由 tagShow=true 通过v-if使路由组件重新渲染，达到刷新目的
    refreshAfter(route) {
      this.tags.splice(refreshIndex, 0, route);
      this.tagShow = true;
    },
  },
});
/*
import { reactive, ref } from "vue";
import { defineStore } from "pinia";

export const useMenuTagsStore = defineStore("menuTags", () => {
  const tags = reactive([]);
  const tagsStack = reactive([]);
  let getCurrentTagName = () => {
    return tagsStack.length > 0 ? tagsStack[tagsStack.length - 1].name : "";
  };
  function addTag(route) {
    const index = tags.findIndex((item) => item.name === route.name);
    if (index < 0) {
      tags.push(route);
    }
    setTagsStack(route);
  }

  function removeTag(route) {
    const index = tags.findIndex((item) => item.name === route.name);
    if (index >= 0) {
      tags.splice(index, 1);
      removeTagsStack(route);
    }
  }

  // 设置打开标签的堆栈
  function setTagsStack(route) {
    const index = tagsStack.findIndex((item) => item.name === route.name);
    if (index < 0) {
      tagsStack.push(route);
    } else {
      tagsStack.splice(index, 1);
      tagsStack.push(route);
    }
  }

  // 移除打开标签堆栈
  function removeTagsStack(route) {
    const index = tagsStack.findIndex((item) => item.name === route.name);
    if (index >= 0) {
      tagsStack.splice(index, 1);
    }
  }

  return { tags, getCurrentTagName, addTag, removeTag };
});
*/
